import React from 'react'
import { 
  getPriorityColor, 
  getCategoryColor, 
  getTaskStatusColor,
  getTaskStatusBgColor,
  getTaskStatusBorderColor,
  getTagColor,
  ColorVariant 
} from '../utils/colorUtils'

interface StatusBadgeProps {
  children: React.ReactNode
  variant?: 'priority' | 'category' | 'status' | 'tag'
  value?: string
  size?: 'sm' | 'md' | 'lg'
  className?: string
}

export default function StatusBadge({ 
  children, 
  variant = 'tag',
  value = '',
  size = 'md',
  className = '' 
}: StatusBadgeProps) {
  const sizeClasses = {
    sm: 'px-2 py-0.5 text-xs',
    md: 'px-2.5 py-1 text-sm',
    lg: 'px-3 py-1.5 text-base'
  }

  const getVariantClasses = () => {
    switch (variant) {
      case 'priority':
        return getPriorityColor(value as any)
      case 'category':
        return getCategoryColor(value as any)
      case 'status':
        return `${getTaskStatusColor(value)} ${getTaskStatusBgColor(value)} border ${getTaskStatusBorderColor(value)}`
      case 'tag':
      default:
        return getTagColor('gray' as ColorVariant)
    }
  }

  return (
    <span 
      className={`
        inline-flex items-center font-medium rounded-full border
        ${sizeClasses[size]}
        ${getVariantClasses()}
        ${className}
      `}
    >
      {children}
    </span>
  )
}

// 优先级标签
export function PriorityBadge({ priority, className = '' }: { priority: string, className?: string }) {
  return (
    <StatusBadge variant="priority" value={priority} className={className}>
      {priority}
    </StatusBadge>
  )
}

// 分类标签
export function CategoryBadge({ category, className = '' }: { category: string, className?: string }) {
  const categoryLabels = {
    work: '工作',
    personal: '个人',
    learning: '学习',
    health: '健康',
    other: '其他'
  }
  
  return (
    <StatusBadge variant="category" value={category} className={className}>
      {categoryLabels[category as keyof typeof categoryLabels] || category}
    </StatusBadge>
  )
}

// 任务状态标签
export function TaskStatusBadge({ status, className = '' }: { status: string, className?: string }) {
  const statusLabels = {
    todo: '待办',
    in_progress: '进行中',
    review: '审核中',
    done: '已完成',
    cancelled: '已取消'
  }
  
  return (
    <StatusBadge variant="status" value={status} className={className}>
      {statusLabels[status as keyof typeof statusLabels] || status}
    </StatusBadge>
  )
}

// 通用标签
export function Tag({ 
  children, 
  variant = 'gray' as ColorVariant,
  size = 'md',
  className = '' 
}: { 
  children: React.ReactNode
  variant?: ColorVariant
  size?: 'sm' | 'md' | 'lg'
  className?: string 
}) {
  return (
    <span 
      className={`
        inline-flex items-center font-medium rounded-full border
        ${size === 'sm' ? 'px-2 py-0.5 text-xs' : ''}
        ${size === 'md' ? 'px-2.5 py-1 text-sm' : ''}
        ${size === 'lg' ? 'px-3 py-1.5 text-base' : ''}
        ${getTagColor(variant)}
        ${className}
      `}
    >
      {children}
    </span>
  )
}
